<template>
  <el-breadcrumb separator="" style="user-select: none;">
    <!-- 菜单导航栏 -->
    <el-breadcrumb-item v-for="(item, index) in indexStore.breadArray" :key="index" :to="{ path: item.path }">
      <div :class="['router-item', 'flexBetween', { current: route.path == item.path }]"
        @click="clickPath(item.path as string)">
        {{ item.meta.title }}
        <el-icon v-if="item.meta.title == indexStore.pathArray[0].meta.title ? false : true" class="closeItem"
          @click.stop="closePath(index)">
          <CircleClose />
        </el-icon>
      </div>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script lang="ts" setup>
import { onMounted, watch } from 'vue'
import { Time } from '@/utils/serverTime'
import { selectToLabel } from '@/utils/index'

import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

watch(() => router.currentRoute.value, (value) => {
  addBread(value)
})

const addBread = (row: any) => {
  const list = deepClone(indexStore.breadArray)
  if (!list.some((item: any) => item.path === row.path)) {
    const { path, meta, name } = deepClone(row)
    meta.name = name
    list.push({ path, meta, name })
  }
  indexStore.breadArray = list
}

onMounted(() => {
  Time.setGlobalTimeZoneName(indexStore.offset)
  console.log('设置的时区为：', Time.getGlobalTimeZoneName(), new Time().format())
  const bread = indexStore.breadArray
  if (bread) {
    indexStore.breadArray = bread
  } else {
    indexStore.breadArray = route.matched.filter((item) => {
      return item.meta.title && item.meta.title != '/'
    }).map((item) => {
      const { path, meta, name } = item
      meta.name = name
      return { path, meta, name }
    })
  }
  // 刷新清理缓存的查询条件
  if(selectToLabel(indexStore.queryArray,route.name)){
    indexStore.queryArray.forEach((item:any,index:number)=>{
      if(item.value==route.name){
        indexStore.queryArray.splice(index,1,)
      }
    })
  }
})


// 设置localStorage 和 store
const clickPath = (path: string) => {
  localStorage.setItem('path', path)
  indexStore.setLocalPath(path) //用来点击顶部导航栏 刷新左侧菜单选择
}

// 删除导航栏
const closePath = (index: number) => {
  indexStore.breadArray.splice(index, 1)
  const path = indexStore.breadArray[indexStore.breadArray.length - 1].path
  router.replace({ path: path as string })
  clickPath(path as string)
}

/**
 * @description 深度克隆
 * @param {object} obj 需要深度克隆的对象
 * @param cache 缓存
 * @returns {*} 克隆后的对象或者原值（不是对象）
 */
function deepClone(obj: any, cache = new WeakMap()) {
  if (obj === null || typeof obj !== 'object')
    return obj
  if (cache.has(obj))
    return cache.get(obj)
  let clone: any
  if (obj instanceof Date) {
    clone = new Date(obj.getTime())
  }
  else if (obj instanceof RegExp) {
    clone = new RegExp(obj)
  }
  else if (obj instanceof Map) {
    clone = new Map(Array.from(obj, ([key, value]) => [key, deepClone(value, cache)]))
  }
  else if (obj instanceof Set) {
    clone = new Set(Array.from(obj, value => deepClone(value, cache)))
  }
  else if (Array.isArray(obj)) {
    clone = obj.map(value => deepClone(value, cache))
  }
  else if (Object.prototype.toString.call(obj) === '[object Object]') {
    clone = Object.create(Object.getPrototypeOf(obj))
    cache.set(obj, clone)
    for (const [key, value] of Object.entries(obj))
      clone[key] = deepClone(value, cache)
  }
  else {
    clone = Object.assign({}, obj)
  }
  cache.set(obj, clone)
  return clone
}
</script>
<style scoped lang="scss">
.el-breadcrumb {
  padding: 5px 0 0 0;
  line-height: 40px;
  width: 100%;
  overflow: auto;
  white-space: nowrap;
  display: flex;
}

:deep(.el-breadcrumb__inner) {
  font-weight: bold;
  font-size: 16px;
}

.closeItem {
  text-align: center;
  line-height: 14px;
  margin-left: 5px;
}

.closeItem:hover {
  border: none;
  color: #fff;
  border-radius: 50%;
  background-color: #409eff;
  text-align: center;
}

.router-item {
  padding: 0 20px;
  min-width: 30px;
  color: var(--text);
  cursor: pointer;
}

.router-item:hover {
  border-radius: 4px;
  height: 40px;
  background: var(--background);
  color: var(--text);
  box-shadow: $boxShadow;

  &:hover {
    color: #409eff;
  }
}

.current {
  border-radius: 4px;
  height: 40px;
  background: var(--background);
  color: var(--text);
  box-shadow: $boxShadow;
  color: #409eff;
  cursor: pointer;
}
</style>
